<template>
  <div class="tool-bar">
    <el-tooltip v-if="isEditer" effect="dark" content="文本编辑器" placement="right">
      <el-icon :class="{ active: route.name === 'Editer' }" class="tool-icon" @click="toEditerIndex"><i-ep-Reading /></el-icon>
    </el-tooltip>
    <el-tooltip effect="dark" content="随机起名" placement="right">
      <MzIcon class="tool-icon" name="icon-name" @click="generateNameVisible = !generateNameVisible" />
    </el-tooltip>
    <el-tooltip effect="dark" content="绘制地图" placement="right">
      <MzIcon class="tool-icon" name="icon-map" />
    </el-tooltip>
    <el-tooltip effect="dark" content="主题配色" placement="right">
      <MzIcon class="tool-icon" name="icon-theme" @click="editThemeVisible = !editThemeVisible" />
    </el-tooltip>
    <el-tooltip v-if="isEditer" effect="dark" content="大纲描述" placement="right">
      <MzIcon :class="{ active: route.name === 'Outline' }" class="tool-icon" name="icon-outline" @click="handleNavTo('outline')" />
    </el-tooltip>
    <el-tooltip v-if="isEditer" effect="dark" content="各种设定" placement="right">
      <MzIcon :class="{ active: route.name === 'Configuration' }" class="tool-icon" name="icon-configuration" @click="handleNavTo('configuration')" />
    </el-tooltip>
    <el-tooltip v-if="isEditer" effect="dark" content="人物谱" placement="right">
      <MzIcon :class="{ active: route.name === 'Characters' }" class="tool-icon" name="icon-characters" @click="handleNavTo('characters')" />
    </el-tooltip>
    <el-tooltip v-if="isEditer" effect="dark" content="时间线" placement="right">
      <MzIcon :class="{ active: route.name === 'Timeline' }" class="tool-icon" name="icon-timeline" @click="handleNavTo('timeline')" />
    </el-tooltip>
    <el-tooltip effect="dark" content="系统设置" placement="right">
      <el-icon class="tool-icon tool-setting"><i-ep-Setting /></el-icon>
    </el-tooltip>
  </div>
  <EditTheme v-model:visible="editThemeVisible"></EditTheme>
  <GenerateName v-model:visible="generateNameVisible"></GenerateName>
</template>

<script setup lang="ts">
/**
 * 工具栏，包含随机起名，绘制地图，修改主题，等
 */
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useBookStore } from "@/store/modules/bookStore";

const route = useRoute();
const router = useRouter();
const bookStore = useBookStore();

const editThemeVisible = ref(false);
const generateNameVisible = ref(false);
// 是否是书籍编辑窗口
const isEditer = computed(() => {
  return route.path.includes("/editer");
});
// 是否是书籍编辑主窗口
const isEditerIndex = computed(() => {
  return route.path.includes("/editer/index");
});
// 点击大纲描述，进入大纲编辑页
const handleNavTo = (path: string) => {
  if (route.name && route.name.toString().toLowerCase() === path) return;
  router.push({
    path: "/editer/" + path
  });
};
// 跳转编辑首页
const toEditerIndex = () => {
  if (route.name === "Editer") return;
  router.replace({
    path: "/editer/index",
    query: {
      path: bookStore.bookPath
    }
  });
};
</script>

<style lang="scss" scoped>
.tool {
  &-bar {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 30px;
    padding: 15px;
    border-right: 1px solid var(--el-border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--el-fill-color-light);
  }
  &-icon {
    color: #333;
    fill: #333;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 30px;
    width: 30px;
    height: 30px;
    &:hover,
    &.active {
      color: var(--el-color-primary);
      fill: var(--el-color-primary);
    }
  }
  &-setting {
    position: absolute;
    bottom: 15px;
    left: 15px;
    margin-bottom: 0px;
  }
}
</style>
<style lang="scss">
.el-dialog__header {
  margin-right: 0px;
}
.el-dialog--center .el-dialog__body {
  padding: 5px calc(var(--el-dialog-padding-primary) + 5px);
}
</style>
